<template>
  <div class="home">
    <!--S头部统计-->
    <el-row :gutter="10">
      <!--S系统统计-->
      <el-col :span="12">
        <el-card style="height: 310px;">
          <div slot="header">
            系统数据
          </div>
          <el-row :gutter="10">
            <el-col v-for="(item,index) in inforCardData" :key="index" :span="8" style="margin-bottom: 10px;">
              <div class="box">
                <div class="icon" :style="'background:' + item.color">
                  <i class="iconfont" :class="item.icon" />
                </div>
                <div class="data">
                  <p class="number"><span>{{ item.count }}</span></p>
                  <p class="title"><span>{{ item.title }}</span></p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!--S系统统计-->

      <!--S每月数据-->
      <el-col :span="12">
        <month-data></month-data>
      </el-col>
      <!--E每月数据-->
    </el-row>
    <!--E头部统计-->

    <!--S每日数据统计-->
    <el-card id="statistics">
      <div slot="header">
        <span>每日数据</span>
        <el-date-picker
          v-model="select_date"
          class="date-select"
          :picker-options="date_picker_option"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <statistics :date="select_date" @init="statisticsInit" />
      </div>
    </el-card>
    <!--E每日数据统计-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Statistics from './components/statistics'
import MonthData from './components/month-data'
export default {
  name: 'Home',
  components: {
    Statistics,
    MonthData
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      inforCardData: [
        { title: '用户总数', icon: 'icon-manager', count: 0, color: '#2d8cf0' },
        { title: '新增用户', icon: 'icon-tianjiahuiyuan', count: 0, color: '#ED4014' },
        { title: '红包总数', icon: 'icon-zongshu', count: 0, color: '#E46CBB' },
        { title: '今日红包', icon: 'icon-jinrishouru', count: 0, color: '#19be6b' },
        { title: '总收入', icon: 'icon-yuqizongshouru', count: 0, color: '#ed3f14' },
        { title: '今日收入', icon: 'icon-jinrishouru', count: 0, color: '#ff9900' }
      ],
      select_date: '',
      // 时间组件配置
      date_picker_option: {}
    }
  },
  mounted() {
    this.getInfo()
    this.date_picker_option = {
      disabledDate: (date) => {
        return (date < new Date(1637415720000)) || date > new Date()
      }
    }
  },
  methods: {
    /**
     * 获取Infor数据
     */
    getInfo() {
      this.$get('home/getInfo')
        .then((res) => {
          const data = res.data.data
          data.forEach((item, index) => {
            this.$set(this.inforCardData[index], 'count', item)
          })
        })
    },
    /**
     * 一周内数据表统计时间初初始换完成，返回时间
     */
    statisticsInit(date) {
      this.select_date = date
    }
  }
}
</script>

<style scoped lang="scss">
  .home{
    .box{
      background: #fff;
      height: 100px;
      border-radius: 10px;
      box-shadow: 1px 1px 3px 2px #eee;
      font-size: 14px;
      .icon{
        width: 30%;
        height: 100%;
        line-height: 100px;
        border-radius: 10px 0 0 10px;
        float: left;
        text-align: center;
        i{
          color: #fff;
          font-size: 25px;
        }
      }
      .data{
        width: 70%;
        height: 100%;
        float: right;
        text-align: center;
        p{
          position: relative;
          margin: 0;
          padding: 0;
          width: 100%;
          height: 50%;
          color: #666;
          span{
            position: absolute;
            width: 100%;
            display: block;
            bottom: 2px;
          }
          &.title{
            color: #97a8be;
            span{
              top:2px;
            }
          }
        }
      }
    }
    #statistics{
      margin-top: 10px;
      .date-select{
        margin-left: 10px;
      }
    }
  }
</style>
